<template>
    <div class="CommentDetails">
     <p>评论详情</p>
        <div class="content-list clearfix active">
            <div class="img-box clearfix" style="float: left" v-if="picArr.length >= 2">
                <div class="content-list-img">
                    <img :src="$Url+picArr[0]" alt="">
                    <p>before</p>
                </div>
                <div class="content-list-img">
                    <img :src="$Url+picArr[1]" alt="">
                    <p>after</p>
                </div>
            </div>
            <div class="content-list-text clearfix">
                <h1>
                    <span class="title" >{{data.name}}</span>
                    <span class="rate">评价<Rate disabled v-model="data.satisfied" /></span>
                </h1>
                <p class="desc" >
                    {{data.content}}
                    <span >查看详情</span>
                </p>
                <div class="content-list-ues" >
                    <div class="content-list-uesImg">
                        <p>
                            <Icon type="ios-list-box-outline" class="icon"/>
                            <span v-for="i in data.projectgroup">
                                 {{i}} &nbsp;&nbsp;&nbsp;
                            </span>
                        </p>
                    </div>
                    <div class="content-list-zan">
                        <div class="content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>24564</span></div>
                        <div class="content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>24564</span></div>
                        <div class="content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>24564</span></div>
                        <div class="content-list-icon time">{{data.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-title">
                <RadioGroup v-model="animal">
                    <Radio label="全部"></Radio>
                    <Radio label="图片"></Radio>
                    <Radio label="视频"></Radio>
                </RadioGroup>
                <span>时间排序</span>
            </div>
            <review :info='list' @clickSearch="clickSearch"></review>
        </div>
    </div>

</template>

<script>
    import DiaryItem from '../../../components/ListItem/DiaryItem'
    import Review from '../../../components/Comment/Review'
    export default {
        name: "CommentDetails",
        components:{
            DiaryItem,
            Review
        },
        data () {
            return {
                list: [],
                animal: '全部',
                id:'',
                data:[],
                picArr:[],
                group:'',
            }
        },
        created () {
            this.getinfo()
        },
        computed: {

        },
        methods:{
            getinfo () {
                this.id = this.$route.query.id
                let _this = this
                _this.$post('/api/Diary/DiaryInfo',
                    {
                        diary_id:_this.id,
                    },function (res) {
                        _this.data = res.data
                        _this.picArr = res.data.images
                        _this.list = res.data.evaluate
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);

                    }
                )
            },
            clickSearch (text) {
                this.getinfo()
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";
    .CommentDetails{
        width: 990px;
        height: 1612px;
        background-color: #ffffff;
        border: solid 1px #e0e0e0;
        padding: 20px !important;
        >:first-child{
            color: @theme-color-dark;
            font-size: 18px;
            border-bottom: 2px solid @theme-color-dark;
        }
        .box{
           .box-title{
               padding:15px 20px;
               background-color: #fafafa;
               border: solid 1px #f0f0f0;
               .ivu-radio-wrapper{
                   margin-left: 20px;
               }
               >span{
                   float: right;
                   padding: 9px 12px;
                   background-color: white;
                   border: 1px solid #e0e0e0;
                   margin-top: -10px;
               }
           }
        }
            background-color: #fff;
            padding: 11px 0 0 0;
            .active{
                border-bottom: 1px  dashed  @theme-color-dark;
            }
            .content-list{
                border-bottom: 1px  solid #e4e4e4;
                padding: 21px 0 21px 0;

                .one-img{
                    width: 128px;
                    height: 150px;
                    float: left;
                    img{
                        width: 100%;
                        height:100%;
                        border-radius: 5px;
                    }
                }
                .content-list-img{
                    float: left;
                    margin-right: 5px;
                    width: 128px;
                    height: 128px;
                    position: relative;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                    p{
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        z-index: 1;
                        color: #ffff;
                        text-align: center;
                        height: 22px;
                        line-height: 22px;
                        background-color: rgba(0,0,0,0.4);
                        border-radius: 0 0 5px 5px;
                    }
                }
                .content-list-text{
                    width: 642px;
                    float: left;
                    height: 100%;
                    margin-left: 15px;
                    h1{
                        font-size: 15px;
                        color: #333333;
                        font-weight: normal;
                        padding-bottom: 4px;
                        .title {
                            display: inline-block;
                            width: 218px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .rate{
                            font-size: 12px;
                            float: right;
                            margin-top: -1px;
                        }
                        .ivu-rate-star{
                            margin-right: 0 !important;
                            font-size: 15px;
                        }
                        .ivu-rate{
                            margin-top: -4px;
                        }
                    }
                    .desc{
                        width: 100%;
                        font-size: 12px;
                        color: #777777;
                        letter-spacing: 0;
                        text-align: justify;
                        padding-bottom:8px;
                        height: 55px;
                        line-height: 1.4;
                        position: relative;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        span{
                            color: @theme-color-dark;
                        }
                    }
                }
                .content-list-ues{
                    min-height: 30px;
                    .content-list-uesImg{
                        width: 100%;
                        .icon{
                            font-size: 18px;
                        }
                        p{
                            width: 100%;
                            font-size: 14px;
                            color: @theme-color-dark;
                            padding-right: 10px;
                            float: left;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .content-list-zan{
                        height: 30px;
                        .content-list-icon{
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            float: left;
                            margin-right: 15px;
                            span{
                                padding-left: 8px;
                                color: #999999;
                            }
                        }
                        .icom{
                            margin-top: -4px;
                        }
                        .icon{
                            color: #999999;
                        }
                        .time{
                            float: right;
                            color: #999999;
                        }
                    }
                }
            }
            .btn-box {
                text-align: right;
                .btn {
                    display: inline-block;
                    color: @theme-color;
                    border: 1px solid @theme-color;
                    font-size: 14px;
                    height: 28px;
                    line-height: 28px;
                    padding: 0 18px;
                    margin-right: 14px;
                    border-radius: 4px;
                    cursor: pointer;
                    position: relative;
                }
                .active {
                    &:after {
                        content: '';
                        display: inline-block;
                        border: 1px solid @theme-color;
                        width: 8px;
                        height: 8px;
                        position: absolute;
                        bottom: -10px;
                        left: 28px;
                        background: #fff;
                        border-right-color: transparent;
                        border-bottom-color: transparent;
                        transform:rotate(45deg);
                        -ms-transform:rotate(45deg); 	/* IE 9 */
                        -moz-transform:rotate(45deg); 	/* Firefox */
                        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
                        -o-transform:rotate(45deg);
                    }
                }
            }
            .reason-box {
                padding: 5px 10px 10px;
                float: left;
                width: 100%;
                .reason {
                    padding: 10px;
                    border: 1px solid @theme-color;
                }
            }
        }
        .content-list:hover{
            border-bottom: 1px  solid #ff82a4;
            background-color: #f8f8f8;
        }
        .content-list:hover .content-list-img p{
            background-color: rgba(255,91,154,0.4);
        }

</style>